<template>
    <div class="app-container merchantBox">

        <!-- 商户列表 -->
        <div class="merchantTable">
            <el-table
                    v-loading="listLoading"
                    :data="list"
                    element-loading-text="Loading"
                    border
            >
                <el-table-column label="店铺名称" align="center" width="320">
                    <template slot-scope="scope">
                        <span>{{ scope.row.name}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="店铺类型" align="center" width="150">
                    <template slot-scope="scope">
                        {{ scope.row.store_type_id === 1 ? '餐饮' : '商城' }}
                    </template>
                </el-table-column>
                <el-table-column label="店铺分类" align="center" width="150">
                    <template slot-scope="scope">
                        {{ scope.row.class_name }}
                    </template>
                </el-table-column>
                <el-table-column class-name="status-col" label="电话" align="center" width="169">
                    <template slot-scope="scope">
                        {{ scope.row.mobile }}
                    </template>
                </el-table-column>
                <el-table-column class-name="status-col" label="状态" align="center" width="169">
                    <template slot-scope="scope">
                        {{    scope.row.status === 0 ? '未填写信息' :
                              scope.row.status === 1 ? '申请中' :
                              scope.row.status === 2 ? '通过' :
                              '驳回'
                        }}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="created_at" label="创建时间" width="220">
                    <template slot-scope="scope">
                        <span>{{ scope.row.create_time }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="created_at" label="操作" width="243">
                    <template slot-scope="scope">
                        <div class="optionAll">
                            <router-link :to="{path:'read_merchant',query:{'id':scope.row.id}}">
                                <el-button
                                        size="mini"
                                >
                                    查看资料
                                </el-button>
                            </router-link>
                            <el-button
                                    v-if="scope.row.status === 1"
                                    @click="handleUpdateStatus(scope.row.id, 2)"
                                    size="mini"
                                    type="primary"
                            >
                                通过
                            </el-button>
                            <el-button
                                    v-if="scope.row.status === 1"
                                    @click="handleUpdateStatus(scope.row.id, 3)"
                                    size="mini"
                                    type="danger"
                            >
                                驳回
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <el-pagination
                class="pageBox"
                background
                layout="prev, pager, next"
                :total="pageTotal"
                :page-size="10"
                v-if="pageShow"
                @current-change="handleCurrentChange">
        </el-pagination>

    </div>
</template>

<script>


    export default {
        name: 'Merchant-manage',
        components: {},
        data() {
            return {
                list: null,
                listLoading: false,
                pageTotal: 0,
                pageShow: false
            }
        },
        created() {

        },

        methods: {
            // 数据初始化
            defaultFn(currentPage) {
                this.listLoading = true
                this.$http.get('/web/store/index', {
                    params: {
                        'token': localStorage.getItem('user_token'),
                        'page': currentPage,
                        'pageSize': 10
                    }
                })
                    .then((response) => {
                        if (response.data.status === 'success') {
                            this.list = response.data.data.list;
                            this.pageTotal = response.data.data.pagination.total;
                            if (this.pageTotal > 10) {
                                this.pageShow = true;
                            } else {
                                this.pageShow = false;
                            }
                            this.listLoading = false
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                    });
            },
            // 触发分页
            handleCurrentChange(val) {
                this.defaultFn(val)
            },

            handleUpdateStatus(id, status) {
                this.loading = true;
                this.$http.post('/web/store/update/status', {
                    token: localStorage.getItem('user_token'),
                    id: id,
                    status: status
                }).then(response => {
                    if (response.data.status === 'success') {
                        this.$message.success('审核成功');
                        this.defaultFn();
                    }
                    this.loading = false;
                }).catch(() => {
                    this.loading = false;
                })
            }
        },
        mounted() {
            this.defaultFn()

        }
    }
</script>

<style scoped lang='scss'>
    .merchantBox {
        margin: 40px;

        .addUser {
            margin-bottom: 20px;
        }

        .optionAll {
            display: flex;
            justify-content: space-between;
        }
    }

    .pageBox {
        text-align: center;
        margin-top: 30px;
    }

    .merchantTable{
        width: 1422px;
    }

</style>
